<template>
	<!-- 子抽屉 -->
	<a-modal
		:title="titleMap"
		:visible="childrenDrawer"
		@ok="createAction"
		@cancel="onChildrenDrawerClose"
		:width="680"
		:ok-text="$t('user.verification-code.required1166')"
		:cancel-text="$t('user.email.required11')"
        :ok-button-props="{ props: { disabled: state == 'see' } }"

	>
		<a-form :form="form" labelAlign="right">
			<a-row>
				<a-col :span="12">
					<a-form-item style="margin: 0" label="事件描述:">
						<a-input
							v-decorator="[
								'OptDescribe',
								{
									rules: [
										{
											required: true,
											message: '事件描述',
										},
									],
								},
							]"
							style="width: 300px"
							placeholder="请针对该事件的发生情况,进行描述"
							:disabled="state == 'see'"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item style="margin: 0" label="事件来源:">
						<a-input
							v-decorator="[
								'OptSource',
								{
									rules: [
										{
											required: true,
											message: '事件来源',
										},
									],
								},
							]"
							style="width: 300px"
							placeholder="请输入运营事件获取来源渠道"
							:disabled="state == 'see'"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item style="margin: 0" label="事件提交人:">
						<a-select
							v-decorator="[
								'OptCreateUserName',
								{
									rules: [
										{
											required: true,
											message: '事件提交人',
										},
									],
								},
							]"
							placeholder="请选择事件提报人"
							show-search
							option-filter-prop="children"
							:default-active-first-option="false"
							@search="filte1rOption"
							:showArrow="false"
							:filterOption="false"
							style="width: 300px"
							:disabled="disabled || state == 'see'"
						>
							<a-select-option
								v-for="item in userList"
								:value="item.value"
								:key="item.value"
							>
								{{ item.label }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item style="margin: 0" label="提交时间:">
						<a-date-picker
							v-decorator="[
								'OptCreateTime',
								{
									rules: [
										{
											required: true,
											message: '提交时间',
										},
									],
								},
							]"
							show-time
							style="width: 300px"
							:disabled="state == 'see'"
							format="YYYY-MM-DD HH:mm:ss"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item style="margin: 0" label="事件所属模块:">
						<a-select
							v-decorator="[
								'OptRelatedModule',
								{
									rules: [
										{
											required: true,
											message: '事件所属模块',
										},
									],
								},
							]"
							placeholder=""
							show-search
							option-filter-prop="children"
							:default-active-first-option="false"
							@search="filte1rOption"
							:showArrow="false"
							:filterOption="false"
							style="width: 300px"
							:disabled="disabled || state == 'see'"
						>
							<a-select-option
								v-for="item in ModuleList"
								:value="item.value"
								:key="item.value"
							>
								{{ item.label }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item style="margin: 0" label="事件关联的任务名称:">
						<a-input
							v-decorator="[
								'OptRelatedTaskName',
								{
									rules: [
										{
											required: true,
											message: '事件关联的任务名称',
										},
									],
								},
							]"
							style="width: 300px"
							placeholder="请输入由那一任务觉察的该事件"
							:disabled="state == 'see'"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item style="margin: 0" label="事件受理人:">
						<a-select
							v-decorator="[
								'OptAcceptUserName',
								{
									rules: [
										{
											required: true,
											message: '事件受理人',
										},
									],
								},
							]"
							placeholder="请输入事件受理人"
							show-search
							option-filter-prop="children"
							:default-active-first-option="false"
							v-model="inputValue"
							@search="filte1rOption"
							:showArrow="false"
							:filterOption="false"
							style="width: 300px"
							:disabled="disabled || state == 'see'"
						>
							<a-select-option
								v-for="item in userList"
								:value="item.value"
								:key="item.value"
							>
								{{ item.label }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item style="margin: 0" label="事件处理人:">
						<a-select
							v-decorator="[
								'OptProcessUserName',
								{
									rules: [
										{
											required: true,
											message: '事件处理人',
										},
									],
								},
							]"
							placeholder="请输入事件处理人"
							show-search
							option-filter-prop="children"
							:default-active-first-option="false"
							v-model="inputValue"
							@search="filte1rOption"
							:showArrow="false"
							:filterOption="false"
							style="width: 300px"
							:disabled="disabled || state == 'see'"
						>
							<a-select-option
								v-for="item in userList"
								:value="item.value"
								:key="item.value"
							>
								{{ item.label }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>

			<a-row>
				<!-- 状态、时间组合 -->
				<a-col :span="12">
					<a-form-item
						:label="
							$t(
								'user.login.message-invalid-verification-code0011'
							)
						"
					>
						<a-select
							v-decorator="[
								'OptStatus',
								{
									rules: [
										{
											required: true,
											message: $t(
												'user.verification-code.required111566110577280'
											),
										},
									],
								},
							]"
							:placeholder="
								$t(
									'user.login.message-invalid-verification-code001122'
								)
							"
							style="width: 300px"
							v-model="OptStatusT"
                            :disabled="state == 'see'"
						>
							<a-select-option
								v-for="item in selectList"
								:value="item.value"
								:key="item.value"
							>
								{{ $t(item.label) }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<!-- 时间 -->

				<a-col :span="12" v-show="OptStatusT != 1">
					<a-form-item label="解决时间">
						<a-date-picker
							v-decorator="[
								'OptFinishTime',
								{
									rules: [
										{
											required: OptStatusT != 1,
											message: '解决时间',
										},
									],
								},
							]"
							show-time
							style="width: 300px"
							:disabled="state == 'see'"
							format="YYYY-MM-DD HH:mm:ss"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-form-item label="事件处理记录描述" style="margin-top: 10px">
				<a-textarea
					v-decorator="[
						'OptProcessDescribe',
						{
							rules: [
								{
									required: true,
									message: '事件处理记录描述',
								},
							],
						},
					]"
                    :disabled="state == 'see'"
					placeholder="请针对该事件的处理情况,进行描述"
					:rows="3"
					style="width: 670px"
				/>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script>
import { DcoQuery, getUserList } from '@/api/common/form'
import moment from 'moment'
import {
	dpiaRemarkLists,
	ristCreateAction,
	ristDelActionRemark,
} from '@/api/risk/form'
import axios from 'axios'
import { ristCreateActionRemark, ristEditActionRemark } from '@/api/risk/json'
import {  Opcreate,Opupdate } from '@/api/dpia/json'
import { FilesDel,Opselect } from '@/api/dpia/form'


import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import deepClone from 'lodash.clonedeep'
export default {
	created() {
		this.init()
	},
	props: {
		mode: {
			type: String,
		},
		riskId: {
			type: Number,
		},
		editId: {
			type: Number,
		},
	},
	data() {
		return {
			keyword: '',
			disabled: false,
			childrenDrawer: false,
			userDcoList: [],
			// titleMap: ['新增措施', '修改措施'],
			titleMap: '',
			form: this.$form.createForm(this),
			// 时间配置
			config: {
				rules: [
					{
						type: 'object',
						required: true,
						message: this.$t(
							'user.verification-code.required111566110577285'
						),
					},
				],
			},
			env: process.env.VUE_APP_BASE_API,
			headers: {
				authorization: 'authorization-text',
			},
			selectList: [
				{
					label: '处理中',
					value: 1,
				},
				{
					label: '已解决',
					value: 2,
				},
				{
					label: '已关闭',
					value: 3,
				},
			],
			ModuleList: [
				{
					label: 'RPA',
					value: 'RPA',
				},
				{
					label: 'RISK',
					value: 'RISK',
				},
				{
					label: 'DPIA',
					value: 'DPIA',
				},
			],
			userList: [],
			inputList: [],
			fileLists: [],
			edit: '',
			//点击新建空模板Id
			actionId: '',
			remark: {},
			okType: '',
			urlList: [],
			actionType: '',
			// 备注用的信息
			actionCreateUser: '',
			actionCreateUserId: '',
			timerId: '',
			inputValue: '',
			state: '',
			OptId: '',
			editId: '',
			OptStatusT: 1,
		}
	},
	mounted() {
		this.actionCreateUser = this.$store.state.user.info.name
	},
	watch: {
		async inputValue(value) {
			const { data } = await getUserList({
				UserEmail: value,
				UserName: value,
			})
			this.userList = data
		},
	},
	methods: {
		// 用户查询
		async filte1rOption(value) {
			this.inputValue = value
		},
		async init() {
			this.listLoading = true
			try {
			} catch (error) {
				// 报错信息
				this.$message.error(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		disabledDate(current) {
			const currentDate = moment().format('YYYY-MM-DD')
			return current && current.format('YYYY-MM-DD') < currentDate
		},
		//子抽屉展示
		async openAction(state, editId) {
			this.childrenDrawer = true
			this.OptStatusT = 1
			if (state == 0) {
				this.state = 'add'
			} else if (state == 1) {
				this.state = 'edit'
                this.editId = editId
				const { data: remar } = await Opselect({
					Id: editId,
				})
                this.form.setFieldsValue(remar)
			} else {
				this.state = 'see'
				const { data: remar } = await Opselect({
					Id: editId,
				})
				this.form.setFieldsValue(remar)
			}
		},
		//子抽屉关闭
		onChildrenDrawerClose() {
			this.editId = ''
			this.childrenDrawer = false
			// 清空form的值
			this.form.resetFields()
		},
		//新建action
		async createAction() {
			// 提交创建题目
			const {
				form: { validateFields },
			} = this
			// 按钮loading
			this.loading = true
			validateFields({ force: true }, async (err, values) => {
				;(values.OptCreateTime = moment(values.OptCreateTime).format(
					'YYYY-MM-DD HH:mm:ss'
				)),
					(values.OptFinishTime = moment(values.OptFinishTime).format(
						'YYYY-MM-DD HH:mm:ss'
					))
				if (!err) {
					try {
						if (this.state === 'add') {
							values.OptId = ''
							const { data } = await Opcreate(deepClone(values))
							this.$message.success(
								this.$t(
									'user.verification-code.required111566171'
								)
							)
							this.onChildrenDrawerClose()
							this.$emit('succeed')
                            this.$router.push({
                                path: '/DashBoard/operate',
                                query: {},
                            })
						} else {
							values['OptId'] = this.editId.toString()
							const { data } = await Opupdate(deepClone(values))
							this.$message.success(
								this.$t(
									'user.verification-code.required111566171'
								)
							)
							this.onChildrenDrawerClose()
							this.$emit('succeed')
						}
					} catch (error) {
						this.$message.error(error)
					} finally {
						this.loading = false
					}
				} else {
					setTimeout(() => {
						this.loading = false
					}, 600)
				}
			})
		},

		filterOption(input, option) {
			return (
				option.componentOptions.children[0].text
					.toLowerCase()
					.indexOf(input.toLowerCase()) >= 0
			)
		},
	},
}
</script>
<style lang="less" scoped>
/deep/ .ant-timeline-item-content {
	top: -11px;
}

/deep/ .ant-timeline-item {
	padding: 0 0 1px;
}

/deep/ .ant-form-item {
	margin-bottom: 0px;
}
</style>
